<template>
 <ProductList></ProductList>
<!-- <CounterManager></CounterManager> -->
</template>
<script setup>
import ProductList from './components/ProductList.vue';
import CounterManager from './components/CounterManager.vue';
</script>
<style scoped></style>
练习题 1：商品列表与详情（父传子基础）
需求：
- 父组件 ProductList 中维护一个商品列表数组（包含 id、name、price、image 字段）。
- 子组件 ProductItem 负责渲染单个商品的卡片（显示图片、名称、价格）。
- 父组件通过循环将每个商品的数据传递给子组件，实现商品列表展示。
要求：
1.父组件使用 v-for 循环渲染 ProductItem，并通过 props 传递商品数据。
2.子组件需定义 props 类型（使用 defineProps），并指定必填项和数据类型。
3.当商品价格大于 100 元时，子组件中价格文字显示为红色；否则为黑色。
提示：
- 子组件 props 可定义为：{ id: Number, name: String, price: Number, image: String }
- 价格样式可通过动态 :class 控制。
练习题 2：计数器与操作记录（子传父 + 状态管理）
需求：
- 父组件 CounterManager 中显示一个计数器数值和操作记录列表。
- 子组件 CounterControl 包含两个按钮：“+1” 和 “-1”，用于修改计数器数值。
- 每次点击子组件的按钮时，不仅要更新父组件的计数器数值，还要向父组件传递一条操作记录（如 “点击了 + 1，当前值：5”），并在父组件中展示所有记录。
要求：
1.子组件通过 $emit 触发事件（如 update-count 和 add-record），向父组件传递数据。
2.父组件接收事件后，更新自身的 count 状态和 records 数组。
3.操作记录需包含时间戳（格式：YYYY-MM-DD HH:MM:SS），并按时间倒序排列。
提示：
- 时间格式化可使用 new Date().toLocaleString() 简化处理。
- 子组件按钮点击时，先计算新值，再通过 emit 传递给父组件。